<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>案例管理</el-breadcrumb-item>
      <el-breadcrumb-item>案例详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <template>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="楼房信息" name="house_info">
            <template>
              <!-- :rules="rules" -->
              <el-form :model="houseForm" ref="houseForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="房屋地址" required style="width: 600px;" prop="address">
                  <el-input v-model="houseForm.address"></el-input>
                </el-form-item>
                <el-form-item label="房屋面积" required style="width: 600px;" prop="area">
                  <el-input type="number" v-model.number="houseForm.area"></el-input>
                </el-form-item>
                <el-form-item label="风格" required prop="style">
                  <el-select v-model="houseForm.style" clearable placeholder="请选择分类">
                    <el-option v-for="item in houseDictData.style" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="图片" required prop="thumbnail">
                  <el-upload class="upload-demo" accept="image/*" :headers="uploadParams.uploadHeaders" :data="uploadParams.uploadData"
                    :action="uploadParams.uploadFileUrl" :on-success="uploadSuccess">
                    <el-button size="small" type="primary">点击上传</el-button>
                  </el-upload>
                </el-form-item>
                <div v-if="houseForm.thumbnail_path != ''" style="height: 150px;width: 300px;margin-left: 100px;margin-bottom: 20px;">
                  <el-image style="height: 100%;" :src="houseForm.thumbnail_path" fit="fill"></el-image>
                </div>
                <el-form-item label="描述" prop="describe" style="width: 600px;">
                  <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6}" v-model="houseForm.describe"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="updateOrCreateHouseForm">保存</el-button>
                  <el-button v-if="operate == 'add'" @click="resetForm">重置</el-button>
                </el-form-item>
              </el-form>
            </template>
          </el-tab-pane>
          <el-tab-pane label="房间信息" name="room_info">
            <el-row type="flex" :gutter="30">
              <el-col :span="8">
                <div style="margin-top: 20px;">
                  <el-form :model="roomForm" ref="roomForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="房间名称" prop="name">
                      <el-input v-model="roomForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="房间描述" prop="describe">
                      <el-input type="textarea" v-model="roomForm.describe"></el-input>
                    </el-form-item>
                    <el-form-item label="图片" required prop="thumbnail">
                      <el-upload class="upload-demo" accept="image/*" :headers="uploadParams.uploadHeaders" :data="uploadParams.uploadData"
                        :action="uploadParams.uploadFileUrl" list-type="picture" :on-success="uploadRoomSuccess">
                        <el-button size="small" type="primary">点击上传</el-button>
                      </el-upload>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="addHouseRoom">保存</el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
              <el-col :span="14" :offset="1">
                <template>
                  <el-table :data="houseForm.rooms" style="width: 100%">
                    <el-table-column fixed prop="name" label="房间" width="100">
                    </el-table-column>
                    <el-table-column prop="describe" label="描述" width="200">
                    </el-table-column>
                    <el-table-column prop="thumbnail" label="图片" width="300">
                      <template slot-scope="scope">
                        <div style="height: 150px;width: 300px;">
                          <el-image style="height: 100%;" :src="scope.row.thumbnail_path" fit="fill"></el-image>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="80">
                      <template slot-scope="scope">
                        <el-button @click="delHouseRoomClick(scope.row.id)" type="text" size="small">删除</el-button>
                        <!-- <el-button type="text" size="small">删除</el-button> -->
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </template>
    </el-card>
  </div>
</template>

<script>
  import {
    getUploadParamsApi,
    updateOrCreateProjectCaseApi,
    getHouseApi,
    _addHouseRoomApi,
    _delHouseRoomApi,
    getProjectCaseDictApi
  } from '../request/api.js'
  export default {
    data() {
      return {
        url: 'https://qiaofinn-1253627477.cos.ap-chengdu.myqcloud.com/product/20200916073251705426.jpg',
        operate: 'add',
        houseDictData: {}, // 产品分类
        houseForm: {
          address: '',
          style: '',
          describe: '',
          area: '',
          thumbnail: 1,
          thumbnail_path: ''
        },
        roomForm: {
          name: '',
          describe: '',
          thumbnail: 1
        },
        // 文件数据
        uploadParams: {},
        // 页面样式
        activeName: 'house_info'
      }
    },
    created() {
      this.getHouseDict()
      // 获取文件上传的参数配置
      this.uploadParams = getUploadParamsApi('house')
      // 判断是create or update
      const houseId = this.$route.query.houseId
      if (houseId !== 'add') {
        this.operate = 'edit'
        this.getHouse(houseId)
      }
    },
    methods: {
      async getHouse(houseId) {
        const {
          data: res
        } = await getHouseApi(houseId)
        console.log(res)
        this.houseForm = res.data
      },
      async getHouseDict() {
        const {
          data: res
        } = await getProjectCaseDictApi()
        console.log(res)
        this.houseDictData = res.data
      },
      updateOrCreateHouseForm() {
        this.$refs.houseForm.validate(async valid => {
          if (valid) {
            const {
              data: res
            } = await updateOrCreateProjectCaseApi(this.houseForm, this.operate)
            console.log(res)
            if (res.status) {
              var message = this.operate === 'add' ? '添加成功！' : '编辑成功！'
              this.$message.success(message)
              if (this.operate === 'add') {
                this.operate = 'edit'
                this.houseForm.id = res.data
              }
            } else {
              this.$message.error('操作失败！')
            }
          }
        })
      },
      // 重置表单
      resetForm() {
        this.$refs.houseForm.resetFields()
      },
      // 文件上传
      uploadSuccess(response) {
        if (response.status) {
          // 保存id 和显示的图片地址
          this.houseForm.thumbnail = response.data.id
          this.houseForm.thumbnail_path = response.data.file_path
        }
      },
      // 房间图片上传
      uploadRoomSuccess(response) {
        if (response.status) {
          // 保存id 和显示的图片地址
          this.roomForm.thumbnail = response.data.id
        }
      },
      async addHouseRoom() {
        console.log(this.roomForm)
        const {
          data: res
        } = await _addHouseRoomApi(this.houseForm.id, this.roomForm)
        console.log(res)
        if (res.status) {
          this.getHouse(this.houseForm.id)
          this.$refs.roomForm.resetFields()
          this.$message.success('添加成功')
        }
      },
      async delHouseRoomClick(roomId) {
        const {
          data: res
        } = await _delHouseRoomApi(roomId)
        console.log(res)
        if (res.status) {
          this.getHouse(this.houseForm.id)
          this.$message.success('删除成功')
        }
      },
      // 标签页事件
      handleClick(tab, event) {
        this.activeName = tab.name
      }
    }
  }
</script>

<style lang="less" scoped>
</style>
